import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  RangePicker,
  Row,
  Space,
  Spin
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, ref } from 'vue'

import { jindouLifeApi } from '@/apis'
import { JindouLifeSetting } from '@/apis/jindouLifeTyps'

export default defineComponent({
  name: 'SystemSetting',
  setup() {
    const jdlEditloading = ref(false)
    const jdlShowDialog = ref(false)
    const jdlDialogLoading = ref(false)

    const jdlConfig = ref({} as JindouLifeSetting)

    //设置
    async function handleEdit() {
      try {
        jdlEditloading.value = true
        jdlConfig.value = await jindouLifeApi.getSystemConfig()
        if (jdlConfig.value.startTime) {
          jdlConfig.value.timeRange = [
            moment(jdlConfig.value.startTime),
            moment(jdlConfig.value.endTime)
          ]
        } else {
          jdlConfig.value.timeRange = []
        }
        jdlShowDialog.value = true
      } finally {
        jdlEditloading.value = false
      }
    }

    //确定
    async function dialogConfirm() {
      if (!jdlConfig.value.cashModulus) {
        message.warn('请输入预警现金部分乘以系数额度')
        return
      }
      if (!jdlConfig.value.beanModulus) {
        message.warn('金豆部分乘以系数')
        return
      }
      if (jdlConfig.value.timeRange && jdlConfig.value.timeRange.length > 0) {
        jdlConfig.value.startTime = jdlConfig.value.timeRange[0].format('x')
        jdlConfig.value.endTime = jdlConfig.value.timeRange[1].format('x')
      } else {
        message.warn('请选择有效期')
        return
      }
      try {
        jdlDialogLoading.value = true
        await jindouLifeApi.setSystemConfig(jdlConfig.value)
        jdlShowDialog.value = false
      } finally {
        jdlDialogLoading.value = false
      }
    }

    return {
      handleEdit,
      dialogConfirm,
      jdlShowDialog,
      jdlDialogLoading,
      jdlConfig,
      jdlEditloading
    }
  },
  render() {
    return (
      <div>
        <Form>
          <FormItem label={'金豆惠生活初始价设置'} required>
            <Space>
              {`现金部分：初始售价 + 金豆部分：第三方售价-初始售价`}
              <Button
                type="primary"
                onClick={this.handleEdit}
                loading={this.jdlEditloading}
              >
                修改初始价
              </Button>
            </Space>
          </FormItem>
        </Form>

        <Modal
          v-model:visible={this.jdlShowDialog}
          width={600}
          confirmLoading={this.jdlDialogLoading}
          title="修改初始价"
          destroyOnClose
          onOk={this.dialogConfirm}
        >
          <Form labelCol={{ span: 6 }} style={{ marginTop: '15px' }}>
            <FormItem label={'现金部分乘以系数'} required>
              <Space>
                <InputNumber
                  placeholder={'请输入'}
                  v-model:value={this.jdlConfig.cashModulus}
                  style={{ width: '300px' }}
                  min={0}
                  step={0}
                  precision={2}
                  maxlength={10}
                />
                {`%`}
              </Space>
            </FormItem>
            <FormItem label={'金豆部分乘以系数'} required>
              <Space>
                <InputNumber
                  placeholder={'请输入'}
                  v-model:value={this.jdlConfig.beanModulus}
                  style={{ width: '300px' }}
                  min={0}
                  step={0}
                  precision={2}
                  maxlength={10}
                />
                {`%`}
              </Space>
            </FormItem>
            <FormItem label="有效期" required>
              <RangePicker
                v-model:value={this.jdlConfig.timeRange}
                showTime={{
                  hideDisabledOptions: true,
                  defaultValue: [
                    moment('00:00:00', 'HH:mm:ss'),
                    moment('23:59:59', 'HH:mm:ss')
                  ]
                }}
                format={'YYYY-MM-DD HH:mm:ss'}
                separator={'至'}
                style={{ width: '400px' }}
              />
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
})
